import * as React from 'react';
import { Menu, Dropdown, Alert, Icon } from 'antd';
import './DialogBox.scss';

/**
 * 对话框及删除，编辑操作
 */
interface DialogBoxProps {
  onEdit: () => any;
  onRemove: () => any;
  message: any;
  boxPos: string;
}
interface DialogBoxState {
  showAction: boolean;
}
class DialogBox extends React.PureComponent<DialogBoxProps, DialogBoxState> {
  static defaultProps: DialogBoxProps = {
    onEdit: () => {},
    onRemove: () => {},
    message: '',
    boxPos: 'left',
  };
  constructor(props: DialogBoxProps) {
    super(props);

    this.state = {
      showAction: false,
    };
  }

  handleToggleAction = (showAction: boolean) => {
    this.setState({
      showAction,
    });
  };

  renderActionDropdown = (boxPos: string) => {
    const { showAction } = this.state;
    const { onEdit, onRemove } = this.props;
    const menu = (
      <Menu>
        <Menu.Item>
          <a
            onClick={(e: any) => {
              e.preventDefault();
              onRemove();
            }}
            href="javascript: void 0;">
            <Icon type="delete" />
            删除
          </a>
        </Menu.Item>
        <Menu.Item>
          <a
            onClick={(e: any) => {
              e.preventDefault();

              onEdit();
            }}
            href="javascript: void 0;">
            <Icon type="edit" />
            编辑
          </a>
        </Menu.Item>
      </Menu>
    );

    return (
      <Dropdown key="action" overlay={menu} trigger={['hover']}>
        <span
          className={`box-action box-action-${boxPos}`}
          style={{ visibility: showAction ? 'visible' : 'hidden' }}>
          <Icon type="ellipsis" />
        </span>
      </Dropdown>
    );
  };

  render() {
    const { message, boxPos } = this.props;
    let content: any[] = [<Alert key="alert" message={message} type="info" />];
    if (boxPos === 'left') {
      content.push(this.renderActionDropdown(boxPos));
    } else {
      content.unshift(this.renderActionDropdown(boxPos));
    }

    return (
      <div
        id="dialog_box"
        onMouseOver={() => {
          this.handleToggleAction(true);
        }}
        onMouseLeave={() => {
          this.handleToggleAction(false);
        }}>
        {content}
      </div>
    );
  }
}
export default DialogBox;
